<template>
  <div id="app">
  <el-row>
      <el-col :span="4">
        <el-menu :default-active="defaultActive">
              <i class="el-icon-location">导航爹</i>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航栏1</span>
            </template>
            <el-menu-item index="1-1">我是1-1</el-menu-item>
            <el-menu-item index="1-2">我是1-2</el-menu-item>
            <el-menu-item index="1-3">我是1-3</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航栏2</span>
            </template>
            <el-menu-item index="2-1">我是2-1</el-menu-item>
            <el-menu-item index="2-2">我是2-2</el-menu-item>
            <el-menu-item index="2-3">我是2-3</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="20"></el-col>
    </el-row>
   
  </div>
</template>

<script>


export default {
  name: 'App',
  mounted(){
   
  },

  data:
    function  (){
      return {
        defaultActive:"2-1"
      }
    }
  ,
  methods:{

  },
  components: {
    
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
